<template>
    <footer class="footer">
        <span class="todo-count"><strong>{{ shu }} </strong> item left</span>

        <ul class="filters" @click="selected">
            <li>
                <a href="#/" @click="type='all'" :class="{selected:type=='all'}">All</a>
            </li>
            <li>
                <a href="#/active" @click="type='no'" :class="{selected:type=='no'}">Active</a>
            </li>
            <li>
                <a href="#/completed" @click="type='yes'" :class="{selected:type=='yes'}">Completed</a>
            </li>
        </ul>

        <button class="clear-completed" @click="delall" v-show="hasDoneTodo">Clear completed</button>
    </footer>
</template>

<script>
    export default {
        data() {
            return {
                type: ''
            }
        },
        props: ['arr1'],
        computed: {
            shu() {
                return this.arr1.filter(item => item.isDone == true).length
            },
            hasDoneTodo() {
                return this.arr1.some(item => item.isDone)
            }
        },
        methods: {
            delall() {
                this.$emit("del-todo")
            },
            selected() {
                this.$emit("change-todo", this.type)
            }
        }
    }
</script>

<style>

</style>